<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>文件传递</title>
    <link rel="stylesheet" href="/static/style.css" />
    <style>
      .filelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
      .file-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #fff; }
      .file-name { font-size: 14px; font-weight: 600; word-break: break-all; }
      .file-meta { color: #64748b; font-size: 12px; margin-top: 6px; }
      .file-actions { margin-top: 10px; display: flex; gap: 8px; }
      .file-actions a { font-size: 12px; color: #0369a1; text-decoration: none; }
    </style>
  </head>
  <body>
    <header>
      <h1>文件传递</h1>
      <nav class="nav">
        <a href="/ark" class="{{ 'active' if (active_nav or '') == 'ark' else '' }}">火山SDK调用</a>
        <a href="/" class="{{ 'active' if (active_nav or '') == 'proxy' else '' }}">中转平台调用</a>
        <a href="/images" class="{{ 'active' if (active_nav or '') == 'images' else '' }}">图片库</a>
        <!-<a href="/files" class="{{ 'active' if (active_nav or '') == 'files' else '' }}">文件</a>->
      </nav>
      <p class="sub">静态文件目录：<code>/static/files</code>（你可将压缩包放在此处供下载）</p>
    </header>

    <main>
      <section class="panel">
        {% if files and files|length > 0 %}
        <div class="filelist">
          {% for f in files %}
          <div class="file-card">
            <div class="file-name">{{ f.name }}</div>
            <div class="file-meta">{{ f.size_human }}</div>
            <div class="file-actions">
              <a href="{{ f.url }}" target="_blank">新窗口打开</a>
              <a href="{{ f.url }}" download>下载</a>
            </div>
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="error">当前没有可下载的文件。请将压缩包放入 <code>static/files</code> 目录。</div>
        {% endif %}
      </section>
    </main>
  </body>
  </html>

